<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="left" size="18" color="#333"></uni-icons>
      </view>
      <text class="title">{{pageTitle}}</text>
      <view class="placeholder"></view>
    </view>
    
    <!-- 能力评估详情 -->
    <block v-if="detailType === 'ability'">
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">能力雷达图</text>
        </view>
        <view class="charts-box">
          <qiun-data-charts 
            type="radar" 
            :opts="{
              legend:{position: 'bottom'},
              extra:{radar:{gridType:'circle'}}
            }" 
            :chartData="abilityRadarData"
          />
        </view>
      </view>
      
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">能力详情</text>
        </view>
        <view class="ability-list">
          <view class="ability-item" v-for="(item, index) in abilityDetails" :key="index">
            <view class="ability-header">
              <view class="ability-name">
                <text class="name-text">{{item.name}}</text>
                <view class="ability-level" :class="getLevelClass(item.level)">
                  {{getLevelText(item.level)}}
                </view>
              </view>
              <text class="ability-score">{{item.score}}分</text>
            </view>
            <view class="ability-progress">
              <view class="progress-bar">
                <view class="progress-inner" :style="{width: item.score + '%', backgroundColor: getScoreColor(item.score)}"></view>
              </view>
            </view>
            <view class="ability-desc">
              <text>{{item.description}}</text>
            </view>
            <view class="compare-info">
              <text class="compare-text">班级平均: {{item.classAvg}}分</text>
              <text class="compare-rank">班级排名: {{item.rank}}/{{item.total}}</text>
            </view>
          </view>
        </view>
      </view>
    </block>
    
    <!-- 知识点掌握详情 -->
    <block v-if="detailType === 'knowledge'">
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">知识点掌握概览</text>
        </view>
        <view class="charts-box">
          <qiun-data-charts 
            type="pie" 
            :opts="{
              legend:{position: 'right'},
              extra:{pie:{activeOpacity:0.8}}
            }" 
            :chartData="knowledgePieData"
          />
        </view>
      </view>
      
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">知识点详情</text>
          <view class="filter-group">
            <view class="filter-item" :class="{active: filter === 'all'}" @click="setFilter('all')">全部</view>
            <view class="filter-item" :class="{active: filter === 'weak'}" @click="setFilter('weak')">薄弱点</view>
          </view>
        </view>
        <view class="knowledge-detail-list">
          <view class="knowledge-item" v-for="(item, index) in filteredKnowledgeList" :key="index">
            <view class="knowledge-header">
              <text class="knowledge-name">{{item.name}}</text>
              <view class="knowledge-tag" :class="getTagClass(item.mastery)">
                {{getTagText(item.mastery)}}
              </view>
            </view>
            <view class="knowledge-stats">
              <view class="stat-box">
                <text class="stat-label">练习题数</text>
                <text class="stat-value">{{item.practiced}}道</text>
              </view>
              <view class="stat-box">
                <text class="stat-label">正确率</text>
                <text class="stat-value">{{item.accuracy}}%</text>
              </view>
              <view class="stat-box">
                <text class="stat-label">掌握度</text>
                <text class="stat-value">{{item.mastery}}%</text>
              </view>
            </view>
            <view class="knowledge-progress">
              <view class="progress-bar">
                <view class="progress-inner" :style="{width: item.mastery + '%', backgroundColor: getMasteryColor(item.mastery)}"></view>
              </view>
            </view>
            <view class="knowledge-action">
              <text class="action-btn practice" @click="practiceKnowledge(item)">练习</text>
              <text class="action-btn review" @click="reviewKnowledge(item)">复习</text>
            </view>
          </view>
        </view>
      </view>
    </block>
    
    <!-- 练习记录详情 -->
    <block v-if="detailType === 'practice'">
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">练习趋势</text>
        </view>
        <view class="charts-box">
          <qiun-data-charts 
            type="line" 
            :opts="{
              extra:{line:{type:'curve'}}
            }" 
            :chartData="practiceLineData"
          />
        </view>
      </view>
      
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">练习记录</text>
          <view class="filter-dropdown" @click="showFilterOption = !showFilterOption">
            <text>{{currentTimeRange}}</text>
            <uni-icons type="down" size="14" color="#666"></uni-icons>
            <view class="dropdown-options" v-if="showFilterOption">
              <view class="option-item" v-for="(option, index) in timeRanges" :key="index" @click.stop="selectTimeRange(option)">
                {{option}}
              </view>
            </view>
          </view>
        </view>
        <view class="practice-list">
          <view class="practice-item" v-for="(item, index) in practiceRecords" :key="index">
            <view class="practice-info">
              <text class="practice-title">{{item.title}}</text>
              <text class="practice-type">{{item.type}}</text>
            </view>
            <view class="practice-result">
              <text class="result-date">{{item.date}}</text>
              <view class="result-status" :class="item.correct ? 'correct' : 'wrong'">
                <uni-icons :type="item.correct ? 'checkmarkempty' : 'closeempty'" size="16" :color="item.correct ? '#2fc25b' : '#f04864'"></uni-icons>
                <text>{{item.correct ? '正确' : '错误'}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="load-more" @click="loadMorePractice">
          <text>加载更多</text>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detailType: 'ability', // 'ability', 'knowledge', 'practice'
      pageTitle: '详情页',
      // 能力评估相关数据
      abilityRadarData: {
        categories: [
          "数据结构",
          "搜索算法",
          "动态规划",
          "贪心算法",
          "图论",
          "数学"
        ],
        series: [
          {
            name: "本月",
            data: [90, 80, 70, 85, 65, 75]
          },
          {
            name: "上月",
            data: [85, 75, 60, 80, 65, 70]
          }
        ]
      },
      abilityDetails: [
        {
          name: "动态规划",
          level: 4,
          score: 85,
          description: "能够熟练应用基本的动态规划算法解决问题，对于复杂的动态规划问题仍需加强。",
          classAvg: 70,
          rank: 5,
          total: 30
        },
        {
          name: "图论",
          level: 3,
          score: 75,
          description: "掌握基本的图论算法，包括最短路径、最小生成树等，但在网络流算法方面还有提升空间。",
          classAvg: 65,
          rank: 8,
          total: 30
        },
        {
          name: "数据结构",
          level: 4,
          score: 90,
          description: "对基础数据结构掌握扎实，能熟练运用各种数据结构解决问题。",
          classAvg: 78,
          rank: 3,
          total: 30
        },
        {
          name: "搜索算法",
          level: 3,
          score: 72,
          description: "理解基本的搜索策略，但在剪枝和优化方面还需加强。",
          classAvg: 68,
          rank: 12,
          total: 30
        }
      ],
      
      // 知识点掌握相关数据
      knowledgePieData: {
        series: [
          {
            name: "掌握良好",
            data: 60
          },
          {
            name: "基本掌握",
            data: 25
          },
          {
            name: "需加强",
            data: 15
          }
        ]
      },
      filter: 'all', // 'all', 'weak'
      knowledgeList: [
        {
          name: "动态规划",
          category: "algorithm",
          practiced: 25,
          accuracy: 88,
          mastery: 85
        },
        {
          name: "贪心算法",
          category: "algorithm",
          practiced: 18,
          accuracy: 94,
          mastery: 92
        },
        {
          name: "图论算法",
          category: "algorithm",
          practiced: 15,
          accuracy: 72,
          mastery: 68
        },
        {
          name: "数据结构",
          category: "datastructure",
          practiced: 20,
          accuracy: 80,
          mastery: 75
        },
        {
          name: "数学",
          category: "math",
          practiced: 8,
          accuracy: 50,
          mastery: 45
        }
      ],
      
      // 练习记录相关数据
      practiceLineData: {
        categories: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
        series: [
          {
            name: "正确率",
            data: [60, 65, 70, 68, 75, 80, 85]
          }
        ]
      },
      showFilterOption: false,
      currentTimeRange: '本月',
      timeRanges: ['本月', '上月', '近三个月', '全部'],
      practiceRecords: [
        {
          title: "01背包-价值最大化",
          type: "动态规划",
          date: "10月28日",
          correct: true
        },
        {
          title: "最小生成树-Kruskal算法",
          type: "图论",
          date: "10月25日",
          correct: false
        },
        {
          title: "区间贪心-活动安排",
          type: "贪心算法",
          date: "10月22日",
          correct: true
        },
        {
          title: "线段树-区间查询",
          type: "数据结构",
          date: "10月20日",
          correct: true
        },
        {
          title: "DFS-全排列问题",
          type: "搜索算法",
          date: "10月18日",
          correct: false
        },
        {
          title: "状态压缩DP-旅行商问题",
          type: "动态规划",
          date: "10月15日",
          correct: true
        }
      ]
    };
  },
  computed: {
    filteredKnowledgeList() {
      if (this.filter === 'all') {
        return this.knowledgeList;
      } else {
        return this.knowledgeList.filter(item => item.mastery < 60);
      }
    }
  },
  onLoad(options) {
    if (options.type) {
      this.detailType = options.type;
      
      switch(this.detailType) {
        case 'ability':
          this.pageTitle = '能力详情';
          break;
        case 'knowledge':
          this.pageTitle = '知识点掌握详情';
          break;
        case 'practice':
          this.pageTitle = '练习记录详情';
          break;
        default:
          this.pageTitle = '详情页';
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    getLevelClass(level) {
      if (level >= 4) return 'level-high';
      if (level >= 3) return 'level-medium';
      return 'level-low';
    },
    getLevelText(level) {
      if (level >= 4) return '优秀';
      if (level >= 3) return '良好';
      if (level >= 2) return '一般';
      return '较弱';
    },
    getScoreColor(score) {
      if (score >= 80) return '#2fc25b';
      if (score >= 60) return '#1890ff';
      return '#f04864';
    },
    getTagClass(mastery) {
      if (mastery >= 80) return 'tag-good';
      if (mastery >= 60) return 'tag-normal';
      return 'tag-weak';
    },
    getTagText(mastery) {
      if (mastery >= 80) return '掌握良好';
      if (mastery >= 60) return '基本掌握';
      return '需加强';
    },
    getMasteryColor(mastery) {
      if (mastery >= 80) return '#2fc25b';
      if (mastery >= 60) return '#1890ff';
      return '#f04864';
    },
    setFilter(type) {
      this.filter = type;
    },
    selectTimeRange(range) {
      this.currentTimeRange = range;
      this.showFilterOption = false;
      // 在这里根据选择的时间范围获取对应的练习记录
    },
    practiceKnowledge(item) {
      uni.navigateTo({
        url: `/pages/exercise/index?type=${item.category}&name=${item.name}`
      });
    },
    reviewKnowledge(item) {
      uni.navigateTo({
        url: `/pages/review/index?type=${item.category}&name=${item.name}`
      });
    },
    loadMorePractice() {
      // 加载更多练习记录
      uni.showToast({
        title: '加载更多记录',
        icon: 'none'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0 30rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.placeholder {
  width: 60rpx;
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.charts-box {
  width: 100%;
  height: 400rpx;
}

.ability-list {
  display: flex;
  flex-direction: column;
}

.ability-item {
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.ability-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.ability-name {
  display: flex;
  align-items: center;
}

.name-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-right: 16rpx;
}

.ability-level {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
}

.level-high {
  background-color: rgba(47, 194, 91, 0.1);
  color: #2fc25b;
}

.level-medium {
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.level-low {
  background-color: rgba(240, 72, 100, 0.1);
  color: #f04864;
}

.ability-score {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.ability-progress {
  margin-bottom: 16rpx;
}

.progress-bar {
  height: 14rpx;
  background-color: #f0f0f0;
  border-radius: 7rpx;
  overflow: hidden;
}

.progress-inner {
  height: 100%;
  border-radius: 7rpx;
}

.ability-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16rpx;
}

.compare-info {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

.filter-group {
  display: flex;
}

.filter-item {
  font-size: 26rpx;
  color: #666;
  margin-left: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
}

.filter-item.active {
  background-color: #1890ff;
  color: #fff;
}

.knowledge-detail-list {
  display: flex;
  flex-direction: column;
}

.knowledge-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.knowledge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.knowledge-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.knowledge-tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
}

.tag-good {
  background-color: rgba(47, 194, 91, 0.1);
  color: #2fc25b;
}

.tag-normal {
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.tag-weak {
  background-color: rgba(240, 72, 100, 0.1);
  color: #f04864;
}

.knowledge-stats {
  display: flex;
  margin-bottom: 16rpx;
}

.stat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 6rpx;
}

.stat-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.knowledge-progress {
  margin-bottom: 16rpx;
}

.knowledge-action {
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  margin-left: 16rpx;
}

.practice {
  background-color: #1890ff;
  color: #fff;
}

.review {
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.filter-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  background-color: #f5f7fa;
}

.dropdown-options {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.option-item {
  padding: 16rpx 20rpx;
  font-size: 26rpx;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
}

.option-item:last-child {
  border-bottom: none;
}

.practice-list {
  display: flex;
  flex-direction: column;
}

.practice-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.practice-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.practice-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.practice-type {
  font-size: 24rpx;
  color: #999;
  padding: 4rpx 12rpx;
  background-color: #f5f7fa;
  border-radius: 12rpx;
  display: inline-block;
}

.practice-result {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.result-date {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.result-status {
  display: flex;
  align-items: center;
  font-size: 24rpx;
}

.correct {
  color: #2fc25b;
}

.wrong {
  color: #f04864;
}

.load-more {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #666;
}
</style> 